<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image @click="fanhui" class="image1" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />选择房源
    </view>
    <scroll-view scroll-x style="padding-top: 6rpx" class="bg-white nav" scroll-with-animation
      :scroll-left="scrollLeft">
      <view class="cu-item view" :class="index == TabCur ? 'text-green cur' : ''" v-for="(item, index) in list"
        :key="index" @tap="tabSelect" :data-id="index">
        {{ item.name }}
        <image src="https://pic.bangbangtongcheng.com/static/xuanzhong.png" mode="widthFix" v-if="TabCur == index" />
      </view>
    </scroll-view>
    <scroll-view scroll-y :style="'height:calc( 100vh - ' + statusBarHeight + 'px - 90rpx )'" @scrolltolower="down">
      <view v-if="xuan == 1">
        <view class="list">
          <view class="li" v-for="(item, index) in Recommend" :key="index" @click="select(item)">
            <radio style="margin-right: 10px"></radio>
            <image :src="imgUrl + item.house_image" />
            <view class="li_1">
              <view class="tit">{{ item.title }}</view>
              <view class="jiedao">{{ item.region }}<span style="margin-left: 14rpx">{{ item.house_type }}</span></view>
              <view class="shijian">
                <span style="
                    margin-right: 24rpx;
                    color: red;
                    font-size: 36rpx;
                    font-weight: 600;
                  " v-if="item.price >= 10000">{{ (item.price / 10000) | nums }}万</span>

                <span style="
                    margin-right: 24rpx;
                    color: red;
                    font-size: 36rpx;
                    font-weight: 600;
                  " v-else>{{ item.price }}元</span>
                <span style>{{ item.AREA || item.area }}㎡</span>
              </view>
            </view>
          </view>
          <view v-if="Recommend.length == 0" class="none">
            <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
            <view>没有更多数据了</view>
          </view>
          <view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
        </view>
      </view>
    </scroll-view>
	<uniBall></uniBall>
  </view>
</template>

<script>
  import permision from "@/js_sdk/wa-permission/permission.js"
  import {
    mapGetters
  } from "vuex";
  let statusBarHeight;
  //#ifdef H5
  import wxshare from "../utils/index.js";
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
  //#endif
  // #ifdef APP-PLUS
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
  //  #endif
  // #ifdef MP-WEIXIN
  statusBarHeight = 106;
  //  #endif
  export default {
    data() {
      return {
        statusBarHeight,
        zbc: false,
        xuan: 1,
        TabCur: 0,
        scrollLeft: 0,
        list: [{
            num: 1,
            name: "全部"
          },
          {
            num: 1,
            name: "新房"
          },
          {
            num: 1,
            name: "二手房"
          },
          {
            num: 1,
            name: "出租房"
          }
        ],
        swiperList: [],
        id: "",
        scrollTop: "",
        data: {},
        imgUrl: this.$imgSrc,
        transactionType: "",
        newOld: "",
        Recommend: [],
        jjrList: [],
        dynamicList: [],
        userInfo: uni.getStorageSync("Pduser"),
        pageNo: 1,
        pageSize: "10",
        downStatus: true,
        type: ""
      };
    },
    computed: {
      ...mapGetters(["statusBarHeight1", "userinfo"])
    },
    onPageScroll: function (Object) {
      // console.log(Object.scrollTop); //实时获取到滚动的值
      this.scrollTop = Object.scrollTop;
    },
    filters: {
      nums(val) {
        return val.toFixed(2);
      },
      images(url) {
        let arr = url.split("");
        if (arr[0] == "/") {
          return this.imgUrl + url;
        } else {
          return url;
        }
      }
    },
    async onLoad(options) {
      this.type = options.type;
      await this.getFy();
      /* #ifdef H5 */
      this.jinzhi();
      /* #endif */
    },
    methods: {
      tabSelect(e) {
        this.TabCur = e.currentTarget.dataset.id;
        this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
        let num = e.currentTarget.dataset.id + 1;
        if (num == 1) {
          this.transactionType = "";
          this.newOld = "";
        } else if (num == 2) {
          this.transactionType = "2";
          this.newOld = "1";
        } else if (num == 3) {
          this.transactionType = "2";
          this.newOld = "2";
        } else if (num == 4) {
          this.transactionType = "1";
          this.newOld = "";
        }
        this.Recommend = [];
        this.pageNo = 1;
        this.upStatus = true;
        this.trigger = false;
        this.getFy();
      },
      select(data) {
        console.log(data);
        let pages = getCurrentPages(); //获取所有页面栈实例列表
        let prevPage = pages[pages.length - 2]; //上一页页面实例
        let floor = data.FLOOR.split(",");
        data.lcType = floor[0];
        if (floor[0] == 1) {
          data.lou1 = floor[1];
          data.lou3 = floor[2];
        } else if (floor[0] == 2) {
          data.lou1 = floor[1];
          data.lou2 = floor[2];
          data.lou3 = floor[3];
        } else if (floor[0] == 3) {
          data.lou3 = floor[1];
        }
        prevPage.$vm.data.splice(this.type, 1, data);
        // [this.type] = data;
        // console.log(prevPage.$vm.data);
        uni.navigateBack();
      },
      onphone(phone) {
        uni.makePhoneCall({
          // 手机号
          phoneNumber: phone,
          // 成功回调
          success: res => {
            console.log("调用成功!");
          },

          // 失败回调
          fail: res => {
            console.log("调用失败!");
          }
        });
      },
      xuanzhong(num) {
        // console.log(num);
        this.xuan = num;
        // console.log(this.xuan);
      },
      getdynamicList() {
        let that = this;
        this.$myRequest
          .get("/mob/user/getArticleInfo", {
            pageSize: "999",
            pageNo: "1",
			businessType:this.userInfo.businessType,
            shopId: this.id
          })
          .then(res => {
            res.list.forEach(el => {
              if (el.image) {
                el.image = el.image.split("|");
              }
            });
            this.dynamicList = res.list;
          });
      },
      chat(receiver, nikeName, img) {
        uni.navigateTo({
          url: `/pages/news/chat1?receiver=${receiver}&img=${img}&nikeName=${nikeName}`
        });
      },
      shouchang() {
        let that = this;
        this.$myRequest
          .post("/mob/user/saveUserCollection", {
            userId: this.userInfo.id,
            type: "1",
            cbType: "2",
            relationId: this.id,
            cancel: this.data.isCollection == 1 ? "1" : ""
          })
          .then(res => {
            uni.showToast({
              title: "收藏成功",
              icon: "none",
              mask: true
            });
            this.getShopDetail();
          });
      },
      ll() {
        let that = this;
        this.$myRequest
          .post("/mob/user/saveUserCollection", {
            userId: this.userInfo.id,
            type: "2",
            cbType: "2",
            relationId: this.id
          })
          .then(res => {});
      },
      getShopDetail() {
        let that = this;
        this.$myRequest
          .get("/mob/user/getShopInfoDetail", {
            id: this.id,
            userId: this.userInfo.id
          })
          .then(res => {
            this.data = res.shopInfo;
            if (this.data.image) {
              this.swiperList = this.data.image.split("|");
            }
          });
      },
      getjjrList() {
        let that = this;
        this.$myRequest
          .get("/mob/user/getAgentInfoList", {
            pageSize: "999",
            pageNo: "1",
            status: '1',
            dutyStatus: '1',
            shopId: this.id
          })
          .then(res => {
            res.page.list.forEach(el => {
              if (el.image) {
                let arr = el.image.split("");
                if (arr[0] == "/") {
                  el.userImage = that.imgUrl + el.userImage;
                }
              }
            });
            this.jjrList = res.page.list;
          });
      },
      down() {
        if (this.downStatus) {
          this.pageNo++;
          this.getFy();
        }
      },
      getFy() {
        let that = this;
        this.upStatus = false;
        this.$myRequest
          .get("/mob/home/getHouseInfo", {
            pageSize: this.pageSize,
            pageNo: this.pageNo,
            // userId: this.userInfo.id,
            transactionType: this.transactionType,
            newOld: this.newOld,
            isLz: "0",
            type: 1
          })
          .then(res => {
            if (!res.list.length) {
              that.downStatus = false;
            }
            this.upStatus = true;
            this.trigger = false;
            res.list.forEach(el => {
              el.active = false;
              if (el.house_image) {
                el.house_image = el.house_image.split("|")[0];
              }
              if (el.house_type_image) {
                el.house_type_image = el.house_type_image.split("|")[0];
              }
            });
            this.Recommend = this.Recommend.concat(res.list);
            // this.userInfo = res.userInfo;
            // uni.setStorageSync("Pduser", res.userInfo);
          });
      },
      jinzhi() {
        let _this = this;
        let param = window.location.href.split("#")[0];
        uni.request({
          method: "post",
          data: {
            url: param
          },
          header: {
            "content-type": "application/x-www-form-urlencoded"
          },
          url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
          success(re) {
            _this.jinzhifx(re.data);
          }
        });
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ["hideMenuItems"]
        });
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            "menuItem:share:appMessage",
            "menuItem:share:timeline",
            "menuItem:share:timeline",
            "menuItem:share:qq",
            "menuItem:favorite",
            "menuItem:share:QZone",
            "menuItem:openWithSafari"
          ]
        });
      },
      detailsDy(id) {
        uni.navigateTo({
          url: "/pages_intermediary/dynamicDetail?id=" + id
        });
      },
      detailjjr(id) {
		  if (!this.showLogin()) {
		  	return;
		  }
        uni.navigateTo({
          url: "/pages_owner/dealer/goldConsultant?userId=" + id
        });
      },
      fanhui() {
        uni.navigateBack({
          delta: 1
        });
      },
      sousuo() {
        uni.navigateTo({
          url: "/pages_search/search"
        });
      },
      bannerD(id) {
        if (id == undefined) {
          uni.navigateTo({
            url: "/pages/index/bannerDetails?id=" + id
          });
        } else {
          uni.navigateTo({
            url: "/pages_index/Watch/index"
          });
        }
      },
      weigui(id) {
        uni.navigateTo({
          url: "/pages_intermediary/illegalBehavior?id=" + id +"&index=1"
        });
      },
      guan() {
        this.zbc = false;
      },
      tiaozhuan(num) {
        if (num == 1) {
          uni.navigateTo({
            url: "/pages_houses/housing/index"
          });
        } else if (num == 2) {
          uni.navigateTo({
            url: "/pages/index/bannerDetails"
          });
        } else if (num == 3) {
          uni.navigateTo({
            url: "/pages/intermediary/index"
          });
        }
      },
      details(id) {
        uni.navigateTo({
          url: "/pages_houses/housing/used/houseDetails?id=" + id
        });
      }
    }
  };
</script>

<style lang="less" scoped>
  .mingpian {
    position: relative;
    width: 690rpx;
    height: 200rpx;
    background: #ffffff;
    box-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.16);
    border-radius: 18rpx;
    margin-top: 40rpx;
    margin-left: 30rpx;

    .name {
      position: absolute;
      top: 50rpx;
      left: 174rpx;
      font-size: 36rpx;
    }

    .img1 {
      position: absolute;
      top: 44rpx;
      left: 30rpx;
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }

    .img2 {
      position: absolute;
      top: 132rpx;
      left: 40rpx;
      width: 100rpx;
      height: 36rpx;
      background: url("https://pic.bangbangtongcheng.com/static/name.png");
      background-size: 100% 100%;
      font-size: 20rpx;
      color: #fff;
      text-align: center;
      line-height: 36rpx;
    }

    .zhiwei {
      position: absolute;
      top: 132rpx;
      left: 54rpx;
      font-size: 20rpx;
      color: #fff;
    }

    .xin {
      position: absolute;
      top: 112rpx;
      left: 170rpx;

      .img3 {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .img4 {
      position: absolute;
      width: 54rpx;
      height: 54rpx;
      top: 50rpx;
      left: 300rpx;
    }

    .img5 {
      position: absolute;
      width: 54rpx;
      height: 54rpx;
      top: 50rpx;
      left: 360rpx;
    }

    .weigui {
      position: absolute;
      top: 50rpx;
      left: 470rpx;
      width: 180rpx;
      height: 100rpx;
      border-left: 2rpx solid #e0e0e0;

      p {
        width: 100%;
        height: 56rpx;
        line-height: 56rpx;
        text-align: center;
        color: #e00000;
        font-size: 56rpx;
      }

      image {
        position: absolute;
        width: 14rpx;
        height: 26rpx;
        top: 72rpx;
        right: 0rpx;
      }
    }
  }

  .bottom {
    position: fixed;
    width: 100%;
    height: 120rpx;
    background-color: #fff;
    bottom: 0;

    .img {
      position: relative;
      display: inline-block;

      image {
        width: 54rpx;
        height: 54rpx;
      }

      p {
        position: absolute;
        font-size: 24rpx;
        width: 100rpx;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
      }
    }

    .but {
      position: absolute;
      width: 200rpx;
      height: 70rpx;
      border-radius: 36rpx;
      text-align: center;
      line-height: 70rpx;
      color: #fff;
      background: #64b6a8;
      top: 26rpx;
      right: 30rpx;
    }
  }

  .tit_t {
    position: relative;
    margin-bottom: 32rpx;
    margin-top: 20rpx;
    margin-left: 30rpx;

    .view {
      display: inline-block;
      width: 120rpx;
      height: 58rpx;
      border-radius: 8rpx;
      text-align: center;
      line-height: 58rpx;
      color: #333;
      background-color: #f2f2f2;
      margin-right: 24rpx;
      font-size: 32rpx;
    }

    .xuan {
      background-color: #64b6a8;
      color: #fff;
    }

    .sai {
      position: absolute;
      font-size: 32rpx;
      top: 4rpx;
      right: 30rpx;

      span {
        margin-left: 8rpx;
        font-size: 20rpx;
      }
    }
  }

  .jieshao {
    width: 100%;
    // height: 140rpx;
    border-bottom: 20rpx solid #f2f2f2;
    padding-bottom: 30rpx;

    p {
      display: inline-block;
    }

    .p1 {
      margin-top: 32rpx;
      margin-left: 30rpx;
      margin-right: 10rpx;
      padding-right: 16rpx;
      font-size: 34rpx;
      color: #64b6a8;
      border-right: 2rpx solid #64b6a8;
    }

    .p2 {
      font-size: 28rpx;
      width: 400rpx;
    }
  }

  .zbc {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99999;

    .tan {
      position: absolute;
      width: 600rpx;
      height: 300rpx;
      background-color: #fff;
      border-radius: 10rpx;
      top: 34%;
      left: 75rpx;

      .text {
        width: 100%;
        text-align: center;
        margin-top: 80rpx;
        font-size: 34rpx;
      }

      .xiao {
        position: absolute;
        width: 160rpx;
        height: 60rpx;
        background: #ffffff;
        border: 2rpx solid #64b6a8;
        border-radius: 37rpx;
        left: 118rpx;
        bottom: 54rpx;
        text-align: center;
        line-height: 60rpx;
        color: #64b6a8;
      }

      .tong {
        position: absolute;
        width: 160rpx;
        height: 60rpx;
        background: #64b6a8;
        border-radius: 37rpx;
        right: 118rpx;
        bottom: 54rpx;
        text-align: center;
        line-height: 60rpx;
        color: #fff;
      }

      .guan {
        position: absolute;
        width: 58rpx;
        height: 58rpx;
        border: 4rpx solid #ffffff;
        border-radius: 50%;
        left: 50%;
        transform: translateX(-50%);
        bottom: -100rpx;
        text-align: center;
        line-height: 48rpx;
        color: #fff;
        font-size: 54rpx;
      }
    }
  }

  .box {
    width: 100%;
    // padding-bottom: 100rpx;
    background-color: #fff;
  }

  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;

    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }

    .image2 {
      position: absolute;
      width: 56rpx;
      height: 56rpx;
      // top: 104rpx;
      right: 30rpx;
    }
  }

  .bannerBox {
    width: 100%;
    height: 400rpx;
    background: #64b6a8;
    padding-top: 28rpx;
    margin-top: -4rpx;

    .banner {
      margin-left: 30rpx;
      width: 690rpx;
      height: 346rpx;
      overflow: hidden;
      border-radius: 24rpx;
    }
  }

  .cu-item .img {
    width: 100rpx;
    height: 100rpx;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .cu-item text {
    font-size: 28rpx;
    color: #333333;
  }

  .list {
    margin-top: 30rpx;
    margin-left: 30rpx;
    width: 720rpx;

    .tit {
      color: #333333;
      font-size: 36rpx;
      margin-bottom: 12rpx;
    }

    .li {
      width: 96%;
      padding-bottom: 18rpx;
      border-bottom: 2rpx solid #e0e0e0;
      margin-bottom: 34rpx;
      display: flex;
      align-items: center;

      image {
        width: 300rpx;
        height: 200rpx;
      }

      .li_1 {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-left: 24rpx;

        .tit {
          width: 280rpx;
          font-size: 34rpx;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; //想要的行数
          -webkit-box-orient: vertical;
        }

        .jiedao {
          width: 280rpx;
          height: 68rpx;
          font-size: 24rpx;
          margin-bottom: 14rpx;
          color: #666666;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; //想要的行数
          -webkit-box-orient: vertical;
        }

        .shijian {
          bottom: 4rpx;
          font-size: 26rpx;
        }
      }
    }

    .li:last-child {
      border-bottom: 0rpx solid #e0e0e0;
    }
  }

  .list_1 {
    margin-top: 30rpx;
    margin-left: 30rpx;
    width: 720rpx;

    .tit {
      color: #333333;
      font-size: 36rpx;
      margin-bottom: 24rpx;
    }

    .li {
      width: 96%;
      padding-bottom: 18rpx;

      image {
        width: 300rpx;
        height: 200rpx;
      }

      .li_1 {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-left: 24rpx;

        .tit {
          width: 366rpx;
          height: 140rpx;
          font-size: 34rpx;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3; //想要的行数
          -webkit-box-orient: vertical;
        }

        .shijian {
          bottom: 4rpx;
          font-size: 26rpx;
        }
      }
    }

    .li:last-child {
      border-bottom: 0rpx solid #e0e0e0;
    }
  }

  .hui {
    position: fixed;
    right: 30rpx;
    bottom: 154rpx;
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
    background-color: #fff;
    border-radius: 34rpx;
    font-size: 26rpx;
    box-shadow: 0px 0px 36rpx rgba(0, 0, 0, 0.16);
    
    image {
    	width: 46rpx;
    	height: 46rpx;
    	margin-right: 18rpx;
    }
  }

  .view {
    position: relative;
    font-size: 32rpx;
    border: 0;
    color: #333333;
    margin-right: 0;

    image {
      position: absolute;
      width: 44rpx;
      height: 24rpx;
      top: 66rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .cur {
    color: #64b6a8;
    border: 0;
    transform: scale(1.1);
  }

  .xian {
    width: 690rpx;
    height: 2rpx;
    margin-left: 30rpx;
    background-color: #e0e0e0;
  }

  .Ptop {
    /* #ifdef H5 || APP-PULS */
    // padding-top: 104rpx;
    margin-top: 98rpx;
    /* #endif */

    /* #ifdef MP  */
    margin-top: 188rpx;
    /* #endif */
  }

  .fixed {
    // display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 40;
  }

  .down {
    height: 60rpx;
    line-height: 60rpx;
    // border-top: 2rpx solid #d0d0d0;
    text-align: center;
  }

  .none {
    text-align: center;

    image {
      width: 430rpx;
      margin-bottom: 16rpx;
    }

    view {
      height: 40rpx;
      line-height: 40rpx;
      color: #666;
    }
  }
</style>